<template>
    <div>

        <div style="display:flex">
            <div>
                <div>
                    <input
                            type="text"
                            v-model="keyword1"
                            placeholder="tablename or fieldsName"
                            @keyup.enter.stop="() => search1()"
                    />
                    <button @click="() => search1()">搜索</button>
                </div>
                <!--filter tablelist-->
                <div>
                    <ul style="display: flex;flex-wrap: wrap;list-style: none;padding-left: 0px;">
                        <li v-for="table in resultList1"
                            style="cursor: pointer;margin:0px;margin: 5px;padding-left: 0px;padding: 5px;">
                             <span
                                     class="needHighLignt"
                                     :style="`${!table.hidden?'background: #ddd;border:1px solid #ddd;':'background: #fff;border:1px solid #ddd;'}`"
                                     @click="()=>{table.hidden=!table.hidden;$forceUpdate()}">
                                {{table.tableName}}
                            </span>
                        </li>
                    </ul>

                </div>
                <div>
                    <h1>master list 保存结果</h1>
                    <div>
                        <el-button @click="()=>save()">保存
                        </el-button>
                    </div>
                    <ul style="margin-top:20px;">
                        <li v-for="table in resultList1" :key="table && table.tableName"
                            v-if="table.hidden"
                        >
                            <div style="display: flex;">
                                <span class="needHighLignt"> {{ table.tableName }}</span>
                                <span style="padding-left: 10px" @click="()=>createA(`/showTable?table=${table.tableName}`,'_blank')"><i style="font-size: 20px;font-weight: 600;cursor: pointer" class="iconfont el-icon-edit-outline"></i></span>
                            </div>
                            <ul>
                                <li v-for="field in table.fields" :key="field.name"
                                    :draggable="true"
                                    @dragstart="dragStart($event, {table,field})"
                                    @dragend="dragEnd($event, {table,field})"
                                    @drop.stop="drop1(table,field)"
                                    @dragover.prevent
                                >
                                    <div class="needHighLignt">{{ field.name }}</div>
                                    <div style="padding-left: 10px" v-if="field.subField">
                                        <span>{{ field.subField }}</span> <span
                                            @click.stop="deleteSubFiled(table,field)" style="padding-left:10px;"
                                            class="iconfont el-icon-delete"></span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="padding-left:20px;">
                <div>
                    <input
                            type="text"
                            v-model="keyword2"
                            placeholder="tablename or fieldsName"
                            @keyup.enter.stop="() => search2()"

                    />
                    <button @click="() => search2()">搜索</button>
                </div>
                <!--filter tablelist-->
                <div>
                    <ul style="display: flex;flex-wrap: wrap;list-style: none;padding-left: 0px;">
                        <li v-for="table in resultList2"
                            style="cursor: pointer;margin:0px;margin: 5px;padding-left: 0px;padding: 5px;">
                             <span
                                     class="needHighLignt"
                                     :style="`${!table.hidden?'background: #ddd;border:1px solid #ddd;':'background: #fff;border:1px solid #ddd;'}`"
                                     @click="()=>{table.hidden=!table.hidden;$forceUpdate()}">
                                {{table.tableName}}
                            </span>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li v-for="table in resultList2" :key="table && table.tableName" v-if="table.hidden">
                            <div>
                                <span class="needHighLignt"> {{ table.tableName }}</span>
                            </div>
                            <ul>
                                <li v-for="field in table.fields" :key="field.name"
                                    :draggable="true"
                                    @dragstart="dragStart($event, {table,field})"
                                    @dragend="dragEnd($event, {table,field})"
                                    @drop.stop="drop2(table,field)"
                                    @dragover.prevent
                                >
                                    <div class="needHighLignt">{{ field.name }}</div>
                                    <div style="padding-left: 10px" v-if="field.subField">
                                        {{ field.subField }}
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import {createA, safeParseJson, uuid} from "../../utils/utils";
    import myalert from "../../utils/myalert";

    export default {
        data: function () {
            return {
                createA,
                keyword1: sessionStorage.getItem("createSearch1") || "",
                keyword2: sessionStorage.getItem("createSearch2") || "",
                resultList1: [],
                resultList2: [],
                currentDropTable: null,
            }
        },
        mounted() {
            //已进入就触发搜索
            if (this.keyword1) {
                this.search1()
            }
            if (this.keyword2) {
                this.search2()
            }
            document.title='表格关系绑定'
        },
        methods: {
            dragStart(e, subField) {
                var item = JSON.parse(JSON.stringify((subField)))
                item.id = uuid()
                this.currentDropTable = item
            },
            dragEnd(e, table) {
                setTimeout(() => {
                    this.currentDropTable = null
                }, 300)

            },
            drop1(masterTable, masterField) {
                var index2 = this.resultList1[masterTable.tableName].fields.findIndex(item => item.name == masterField.name)
                if (index2 >= 0) {
                    this.resultList1[masterTable.tableName].fields[index2].subField = {
                        tableName: this.currentDropTable.table.tableName,
                        fieldName: this.currentDropTable.field.name,
                    }
                    this.$forceUpdate();
                }

            },


            drop2(masterTable, masterField) {
                var index2 = this.resultList2[masterTable.tableName].fields.findIndex(item => item.name == masterField.name)
                if (index2 >= 0) {
                    this.resultList2[masterTable.tableName].fields[index2].subField = {
                        tableName: this.currentDropTable.table.tableName,
                        fieldName: this.currentDropTable.field.name,
                    }
                    this.$forceUpdate();
                }
            },

            async save() {
                var self = this;
                for (const index in this.resultList1) {
                    //只保存在列表中显示的表
                    if(!this.resultList1[index].hidden){
                        for (const index2 in this.resultList1[index].fields) {
                            if (self.resultList1[index].fields[index2].subField) {
                                await axios
                                    .post(`/databases/tableBind`, {
                                        masterTable: self.resultList1[index].tableName,
                                        masterfieldName: self.resultList1[index].fields[index2].name,
                                        subTable:
                                        self.resultList1[index].fields[index2].subField.tableName,
                                        subfieldName:
                                        self.resultList1[index].fields[index2].subField.fieldName,
                                    })
                                    .then((res) => res.data)
                                    .then((res) => {
                                        if (res.code != 400) {
                                            myalert.success("绑定成功")
                                        }
                                    });
                            }
                        }
                    }

                }

                /*  for (const index in this.resultList2) {
                      for (const index2 in this.resultList2[index].fields) {
                          if (self.resultList2[index].fields[index2].subField) {
                              await axios
                                  .post(`/databases/tableBind`, {
                                      masterTable: self.resultList2[index].tableName,
                                      masterfieldName: self.resultList2[index].fields[index2].name,
                                      subTable:
                                      self.resultList2[index].fields[index2].subField.tableName,
                                      subfieldName:
                                      self.resultList2[index].fields[index2].subField.fieldName,
                                  })
                                  .then((res) => res.data)
                                  .then((res) => {
                                      if (res.code != 400) {
                                          myalert.success("绑定成功")
                                      }
                                  });
                          }
                      }
                  }*/
            },
            search1() {
                var self = this;
                //点击保存最新的搜索
                var createSearch = this.keyword1
                sessionStorage.setItem("createSearch1", createSearch)
                axios
                    .get(`/databases/search?keyword=${this.keyword1}`)
                    .then((res) => res.data)
                    .then((res) => {
                        this.resultList1 = res;


                        self.$nextTick(() => {
                            $('body').unhighlight();
                            $('body .needHighLignt').highlight(self.keyword1);
                        })


                    });
            },
            search2() {
                var self = this;
                //点击保存最新的搜索
                var createSearch = this.keyword2
                sessionStorage.setItem("createSearch2", createSearch)
                axios
                    .get(`/databases/search?keyword=${this.keyword2}`)
                    .then((res) => res.data)
                    .then((res) => {
                        this.resultList2 = res;
                        self.$nextTick(() => {
                            $('body').unhighlight();
                            $('body .needHighLignt').highlight(self.keyword2);
                        })
                    });
            },
            deleteSubFiled(table, field) {
                var index2 = this.resultList1[table.tableName].fields.findIndex(
                    (item) => item.name == field.name
                );
                if (index2 >= 0) {
                    //删除绑定
                    axios
                        .post(`/databases/delSubField`, {
                            masterTable: table.tableName,
                            masterfieldName: field.name,
                            subTable: field.subField.tableName,
                            subfieldName: field.subField.fieldName,
                        })


                    this.resultList1[table.tableName].fields[index2].subField = null;
                    delete this.resultList1[table.tableName].fields[index2].subField;
                    this.$forceUpdate();
                }

            }
        }
    }
</script>
<style>
    .highlight {
        background-color: #FFFF88;
    }
</style>